<template>
  <div>
  <section class="section3" style="background-image:url(./static/background.jpg)">
   <div class="section1-title"><h2>{{res.marketInfo.marketShortName}}-车源实时库存信息<img src="@/assets/images/logo1.svg" style="float:right;height:60px;" /></h2></div>
   <div class=" alls">
    <div class="section3-enters">
                 <dl>
                        <dt>库存量</dt>
                        <dd>{{res.getOutline.carStock | storageNum}}<small> 辆</small></dd>
                    </dl>
                    <dl>
                        <dt>本月入库量</dt>
                        <dd>{{res.getOutline.thisMonthStorageInfo.storageNum | storageNum}}<small> 辆</small></dd>
                    </dl>
                    <dl>
                        <dt>累计入库量</dt>
                        <dd>{{res.getOutline.totalStorageInfo.storageNum | storageNum}}<small> 辆</small></dd>
                    </dl>
                     <dl>
                        <dt>上架量</dt>
                        <dd>{{res.getOutline.carPutOnSaleNum | storageNum}}<small> 辆</small></dd>
                    </dl>
               
                     <dl>
                        <dt>本月出库量</dt>
                        <dd>{{res.getOutline.thisMonthOutStorageInfo.storageNum | storageNum}}<small> 辆</small></dd>
                    </dl>
              
                     <dl>
                        <dt>累计出库量</dt>
                        <dd>{{res.getOutline.totalOutStorageInfo.storageNum | storageNum}}<small> 辆</small></dd>
                    </dl>
             
                    <dl>
                        <dt>市场商户</dt>
                        <dd>{{res.getOutline.shopNum | storageNum}}<small> 户</small></dd>
                    </dl> 
                     <dl>
                       <dt>本月交易额</dt>
                        <dd>{{res.getOutline.thisMonthSaleVolume.saleVolume | storageNum}}<small> 万元</small></dd>
                    </dl>
                    <dl>
                        <dt>累计交易额</dt>
                        <dd>{{res.getOutline.totalSaleVolume.saleVolume | allStorageNum}}<small> {{~~res.getOutline.totalSaleVolume.saleVolume >= 10000 ? '亿' : '万元'}}</small></dd>
                    </dl>

   </div>
    <div class="section3-trend">
        <div class="trend-line">
            <!-- <library-trend :params="res.getDayStorageOutAndIn"></library-trend> -->
            <car20 :params="res.getDayStorageOutAndIn" :box="{width: '100%;', height: '367px;'}"></car20>
        </div>
    </div>
   </div>
   <div class="alls">
    <div class="section3-enter section3-outof">
        <div class="box-scroll-auto">
            <h5>销售出库品牌车系 Top10(近30日)</h5>
            <table>
                <tr>
                <th>品牌车系</th>
                <th>销量</th>
                <th>销售额</th>
                </tr>
                <tr v-for="(item, index) in res.getMonthSeriesRank.carOutSeriesRank" :key="index">
                <td>{{item.brandName}} {{item.seriesName}}</td>
                <td>{{item.storageNum}}</td>
                <td>{{item.saleVolume}} 万元</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="bottom-four">
        <div class="both">
            <div class="section3-both">
           <div class="box-scroll-auto">
            <h5>实时入库数据</h5>
            <table>
                <tr>
                <th>时间</th>
                <th>品牌车系</th>
                <th>车架号</th>
                <th>售价</th>
                </tr>
                <tr v-for="(item, index) in res.getCarList.slice(0, 5)" :key="index">
                <td>{{item.carCreateTime | handleDate}}</td>
                <td>{{`${item.brand.brandName} ${item.series.seriesName}`}}</td>
                <td>{{item.carVin.substr((item.length-6),6)}}</td>
                <td>{{item.carRetailPrice ? `${item.carRetailPrice} 万元` : '面议'}}</td>
                </tr>
            </table>
        </div>
        </div>
         <div class="section3-both section3-btwo">
           <div class="box-scroll-auto">
            <h5>实时出库数据</h5>
            <table>
                <tr>
                 <th>时间</th>
                <th>品牌车系</th>
                <th>车架号</th>
                <th>售价</th>
                </tr>
                <tr v-for="(item, index) in res.getCarSaleList.slice(0, 6)" :key="index">
                <td>{{item.carCreateTime | handleDate}}</td>
                <td>{{`${item.brand.brandName} ${item.series.seriesName}`}}</td>
                <td>{{item.carVin.substr((item.length-6),6)}}</td>
                <td>{{item.carRetailPrice ? `${item.carRetailPrice} 万元` : '面议'}}</td>
                </tr>
            </table>
        </div>
        </div>

        </div>
        <div class="pie">
            <div class="pie-both">
                <library-pie :params="res.getDisplacementRank"></library-pie>
            </div>
        </div>
    </div>
    </div>
  </section>
  </div>
</template>

<script>
import func from  '@/assets/js/func.js'
// import libraryTrend from 'section3/libraryTrend'
import libraryPie from 'section3/libraryPie'
import car20 from 'section1/carStockStart20'
    export default {
        components:{
            // libraryTrend,
            libraryPie,
            car20
        },
        filters: {
            handleDate (value) {
                return func.handleDate('MM.dd HH:mm:ss', value)
            },
            storageNum (value) {
                return ~~value > 10000 ? 10000 : ~~value
            },
            allStorageNum (value) {
                return ~~value >= 10000 ? `${String(value).replace(/\d{4}$/, '')}` : `${~~value}`
            }
        },
        methods: {
            getQueryAll: function* () {
            // 出入库量对比分析
            yield this.$axios.get('/controller/public/tvStatis/getDayStorageOutAndIn', {params: {marketId: this.marketId}}),
            yield this.$axios.get('/controller/public/tvStatis/getOutline', {params: {marketId: this.marketId}}),
             // 出库车辆近7天列表
            yield this.$axios.get('/controller/public/tvStatis/getCarSaleList', {params: {marketId: this.marketId, dayNum: 7}}),
             // 入库车辆列表
            yield this.$axios.get('/controller/public/tvStatis/getCarList', {params: {marketId: this.marketId,  pageSize: 10}}),
             // 每日销售额信息
            yield this.$axios.get('/controller/public/tvStatis/getDaySaleInfo', {params: {marketId: this.marketId}}),
              // 销售出库车辆分析
            yield this.$axios.get('/controller/public/tvStatis/getDisplacementRank', {params: {marketId: this.marketId}}),
            // 销售出库品牌车系
            yield this.$axios.get('/controller/public/tvStatis/getMonthSeriesRank', {params: {marketId: this.marketId}});
            // 查询市场信息
            yield this.$axios.get('/controller/getMarketList', {params: {marketId: this.marketId}});
            // 结束
            return false
            },
            getAll () {
                let getQueryFn = this.getQueryAll()
                this.$axios.all([
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value'],
                    getQueryFn.next()['value']
                ]).then(this.$axios.spread((prems1, prems2, prems3, prems4, prems5, prems6, prems7, prems8) => {
                    [
                    this.res.getDayStorageOutAndIn,// 换成getDayStorageOutAndIn
                    this.res.getOutline,
                    this.res.getCarSaleList, 
                    this.res.getCarList,
                    this.res.getDaySaleInfo,
                    this.res.getDisplacementRank,
                    this.res.getMonthSeriesRank,
                    this.res.marketInfo,
                    ] = [
                    prems1.data.result,
                    prems2.data.result,
                    prems3.data.result,
                    prems4.data.result,
                    prems5.data.result,
                    prems6.data.result,
                    prems7.data.result,
                    prems8.data.result[0],
                    ]
                }))
                setTimeout(() => {
                    this.getAll()
                }, func.forwardDate().length * 1000)
            }

        },
        created () {
            this.getAll();
        },
        data () {
            return {
                res: {
                    getDayStorageOutAndIn: {},
                    getOutline: {
                        thisMonthStorageInfo: {},
                        totalStorageInfo: {},
                        thisMonthOutStorageInfo: {},
                        totalOutStorageInfo: {},
                        thisMonthSaleVolume: {},
                        totalSaleVolume: {},
                    },
                   getCarList: [],
                   getCarSaleList: [],
                   getDisplacementRank: {},
                   getMonthSeriesRank: {},
                   marketInfo:{}
                },
                marketId:this.$route.query.marketId || '1',
            }
        }
    }
</script>
